<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的基本使用</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router-3.0.1.js"></script>

    <style>
        /*高亮*/
        .router-link-active,
        .myactive{
            background-color: darkcyan;
        }

        /*设置动画*/
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(80px);
        }

        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
    </style>
</head>
<body>
    <div id="app">
      <!--  <a href="#/login">登录</a>
        <a href="#/register">注册</a>-->

        <!--使用router-link，自动给href加上#和点击事件。会默认渲染成a标签，通过tag可以更改渲染的标签-->
        <router-link to="/login?id=10" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>

        <router-link to="/login2/10" >登录传参方式2</router-link>
        <!--4.使用v-router-->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
    <script>
        //2.定义组件模板对象
        //模板中使用router传入的参数方式1
        //通过$route.query
        var login = {
            template:"<h4>登录组件{{ $route.query.id }}</h4>",
            created(){
                console.log(this.$route)
            }
        }

        //传参方式2
        //通过$route.params
        var login2 = {
            template:"<h2>登录组件传参方式2----{{ $route.params.id }}</h2>",
            created(){
                console.log(this.$route)
            }
        }

        var register = {
            template:"<h4>注册组件</h4>"
        }

        //1.创建vue-router对象
        var routerObj = new VueRouter({
            //routers:代表的是路由规则，如果监听到url发生改变，会使用哪个组件等
            routes:[
                //path:监听的url，component:组件的模板对象
                //redirect:当访问主页时，默认跳转到/login  和后端中的重定向是两回事
                {path: '/', redirect:"/login"},
                {path: '/login', component: login},
                {path: '/register', component: register},
                {path: '/login2/:id', component: login2}
            ],
            //路由高亮 默认的类名是router-link-active,通过下面的值可以修改默认的类名
             linkActiveClass:'myactive'
        }
        )

        var vue = new Vue({
            el:'#app',
            data:{

            },
            methods:{

            },
            //3.关联vue对象和v-router
            router:routerObj
        });
    </script>
</body>
</html>